import { Callout } from 'nextra/components'

# Post Page

In [Quick Start](/), we created an example article as below:

```md
---
title: {{ replace .TranslationBaseName "-" " " | title }}
date: {{ .Date }}
lastmod: {{ .Date }}
author: Author Name
# avatar: /img/author.jpg
# authorlink: https://author.site
cover: /img/cover.jpg
# images:
#   - /img/cover.jpg
categories:
  - category1
tags:
  - tag1
  - tag2
# nolastmod: true
draft: true
---

Cut out summary from your post content here.

<!--more-->

The remaining content of your post.
```

There are some parameters in the front matter you can use to customize your post page (and also its summary).

View the below section to learn more about the parameters.

## Parameters

| Parameter    | Description                                                           | Auto-generated |
| ------------ | --------------------------------------------------------------------- | -------------- |
| `title`      | Title of the post                                                     | Yes            |
| `date`       | Date of the post                                                      | Yes            |
| `lastmod`    | Last modified date of the post                                        | Yes            |
| `author`     | Author of the post, if it's not set, the global `author` will be used | No             |
| `avatar`     | Author's avatar                                                       | No             |
| `authorlink` | Custom link for the current author                                    | No             |
| `cover`      | Cover image of the post                                               | No             |
| `images`     | Used in `og:image` meta tag                                           | No             |
| `categories` | Categories of the post                                                | No             |
| `tags`       | Tags of the post                                                      | No             |
| `nolastmod`  | Disable the last modified date                                        | No             |

## Features

### Alerts

Dream supports [GitHub Alerts Markdown extension](https://github.blog/changelog/2023-12-14-new-markdown-extension-alerts-provide-distinctive-styling-for-significant-content/) compatible alerts. You can use it in your post like below:

```md
> [!NOTE]
> Useful information that users should know, even when skimming content.

> [!TIP]
> Helpful advice for doing things better or more easily.

> [!IMPORTANT]
> Key information users need to know to achieve their goal.

> [!WARNING]
> Urgent info that needs immediate user attention to avoid problems.

> [!CAUTION]
> Advises about risks or negative outcomes of certain actions.
```

See https://g1en.site/posts/dream-post-features/ for a live demo.

If you want to change the default title of the alerts, you can add a
[markdown attribute](https://gohugo.io/content-management/markdown-attributes/)
named `text` like below:

```md
> [!NOTE]
> The default alert title is changed to "Hello".
{text="Hello"}
```

<Callout type="info">
To enable markdown attributes for block-level elements, you still need to set
below configuration in your `hugo.toml`:

```toml
[markup]
[markup.goldmark.parser.attribute]
block = true
```
</Callout>

### Mermaid Diagrams

Dream supports [Mermaid](https://mermaid.js.org/) diagrams. You can use it in your post like below:

````mdx filename="Markdown"
```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```
````

Rendered as:

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```
